<script setup lang="ts">
import epubUpload  from   './components/epubUpload/epubUpload.vue'
import EpubCarousel from "./components/epubUpload/epubCarousel.vue";
import   epubMerge  from   './components/epubUpload/epubMerge.vue'
import {reactive, ref, UnwrapNestedRefs} from "vue";
import JSZip from "jszip";
let  show   =  ref(true)
let  file:any = reactive({})
let  meta= reactive({})
let  zipContent:UnwrapNestedRefs<{}> = reactive({})
let  handleUpload = (fileData)=>{
  file = fileData;
  show.value =  false
}
let item = localStorage.getItem("model");
const value1 = ref<string>(item||'a');

let  handleChange =(e)=>{
  localStorage.setItem("model",e.target.value);
}
</script>

<template>
  <div id="app">
    <a-radio-group v-if="show" v-model:value="value1" @change="handleChange" >
      <a-radio-button value="a">翻译EPUB</a-radio-button>
      <a-radio-button value="b">EPUB合并目录整理</a-radio-button>
    </a-radio-group>
      <section v-if="show" class="main-section">
        <a  target="_blank">
          <img src="./assets/ebook.svg" class="logo" alt="Vite logo" />
        </a>
        <div class="upload-section">
          <epubUpload @upload="handleUpload"></epubUpload>
        </div>
      </section>
    <section v-else>
      <EpubCarousel :file="file" :metadata="meta" :zipContent="zipContent" v-if="value1 ==='a'">

      </EpubCarousel>
      <EpubMerge v-else :file="file" :metadata="meta" :zipContent="zipContent">

      </EpubMerge>
    </section>
  </div>
</template>
<style>
.logo {
  height: 24em;
  padding: 0em;
  will-change: filter;
  transition: filter 300ms;
}

.logo.electron:hover {
  filter: drop-shadow(0 0 2em #9FEAF9);
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.upload-section{
  height: 240px;
  text-align: center;
}
.main-section{
  text-align: center;
}
</style>
